<style lang="less" scoped>
.search_left {
  display: flex;
  justify-content: flex-start;
  height: 80px;
  line-height: 80px;
  padding-left: 10px;
  align-items: center;

  // span {
  //   margin-right: 10px;
  //   height: 40px;
  //   line-height: 40px;
  // }
}
.search_right {
  height: 80px;
  line-height: 80px;
  min-width: 100px;
  border-radius: 10px;
}
.search_right /deep/ input {
  border-radius: 18px !important;
}
.search_btn {
  color: #9596a1;
  /* margin-right: 1%; */
  /* width: 10%; */
}
</style>
<template>
  <div>
    <div class="search-box">
      <div class="search_left">
        <span v-for="btn in buttonList" :key="btn.id">
          <Button
            size="middle"
            :type="active == btn.id ? 'primary' : 'text'"
            class="search-input"
            @click="clickHandler(btn.id)"
          >{{btn.title}}</Button>
        </span>
      </div>
      <div class="search_right">
        <span>
          <Input
            v-model="searchText"
            size="large"
            search
            :placeholder="tips"
            @on-change="searchAll"
            @on-search="search"
          />
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    active: {
      type: Number,
      default: 1,
    },
    buttonList: {
      type: Array,
      default: [],
    },
    searchText: {
      type: String,
      default: "",
    },
    tips: {
      type: String,
      default: "",
    },
    name: {
      type: String,
      default: "",
    },
  },
  methods: {
    search() {
      this.$emit("search", this.searchText);
    },
    searchAll() {
      this.$emit("searchAll", this.searchText);
    },
    clickHandler(type) {
      this.$emit("click", type);
    },
  },
};
</script>
